<template scope>
  <div class="fix-all select-pay">
    <dl class="order-cell">
      <dt class=" md-padding">
        <!-- 号码: {{order.tableId || order.serialNo.substr(order.serialNo.indexOf("-")+1)}} -->
        <span class="td1 "><span class="headcount">{{"app.model!=2"?"支付金额":"号码+order.tableId"}}</span></span><span class="td3">￥{{order.subtotal}}</span>
      </dt>
      <dd class="select-pay-cell  waiting-pay md-padding"><span>等待支付</span><span class="r">{{countdown}}</span></dd>
      <!-- <dd class="select-pay-cell  md-padding"><label for="wexin"><i class="iconfont icon-wexin vm"></i><span>微信支付</span></label><div class="content"><input class="pay-input" type="radio" id="wexin" value="1" v-model="picked" name=></div></dd> -->
      <dd class="select-pay-cell  md-padding"><label for="wexin"><i class="iconfont icon-wexin vm"></i><span>微信支付</span></label><div class="content"><input class="pay-input" type="radio" id="wexin" value="1" v-model="picked" ><i class="weui_icon weui_icon_success select"></i></div></dd>
      <!-- <dd class="select-pay-cell  md-padding"><label for="alipay"><i class="iconfont icon-alipay vm"></i><span>微信支付</span></label><div class="content"><input class="pay-input" type="radio" id="alipay" value="2" v-model="picked"></div></dd> -->
    </dl>


    <button class="bottom-buttom" v-gesture:tap.stop.prevent="pay()">确认支付</button>

    <!-- 提示对话框 -->
    <weui-dialog v-show="isShowDialog" type="alert" title="订单超时，请重新下单" @weui-dialog-confirm="handleDialogAction('确认', 2)"></weui-dialog>
  </div>
</template>

<style lang='sass'>
	@import '../assets/sass/global/themes.scss';
  .select-pay{background:$bg-color-deafult}
  .select-pay .order-cell{width:100%;margin-bottom:5px;}
  .select-pay .order-cell dt{line-height: 60px;box-shadow: none;margin-bottom: 5px;border-bottom: 1px solid #e3e3e3;}
  .select-pay-cell{border-bottom: 1px solid #e3e3e3;border-top: 1px solid #e3e3e3;background:white !important;line-height:60px;font-size:16px;box-sizing:border-box;}
  .select-pay-cell.waiting-pay{margin-bottom:5px;padding: 0 15px;}
  .select-pay-cell label{width:100%;display:inline-block;width:40%;}
  .select-pay-cell .content{width:30%;float:right;text-align:right;position: relative;}
  .select-pay-cell .icon-wexin{font-size:30px;color: #00c700;margin-right: 5px;}
  .select-pay-cell .icon-wexin:before{vertical-align: middle;}
  .select-pay-cell .icon-alipay{font-size:36px;margin-right: 5px;}
  .pay-input{vertical-align:middle;$h:20px;height:$h;width:$h;-webkit-appearance:none;border-radius:100%;border:1px solid #f0f0f0;padding:3px;}
  .pay-input:checked{background:white;}
  .pay-input:checked+.select:before{color: $bg-color-primary;font-size: 23px;position: absolute;top: 50%;transform:translate(-100% ,-50%);}
  .select-pay .bottom-buttom{  width: 100%;
    line-height: 50px;
    border: none;
    color: white;
    background: #fe8100;
    font-size: 16px;
    position:absolute;
    bottom:0;
  }
</style>

 <script >
  import {wechatPay} from "../vuex/actions";
  import {Pay} from "../config";
  import HistoryManage from '../lib/history-manage';

  export default {
    vuex:{
      getters:{
        app:(state)=>state.app
      },
      actions:{
        wechatPay
      }
    },
    components: {
      'weui-dialog': require('../components/dialog/dialog')
    },
    methods: {
      pay: function(){
        const self = this;
        let i = ~~self.picked;
        if(self.picked==1){
          self.wechatPay(self.order);
        }
      },
      handleDialogAction: function(){
        this.isShowDialog = false;
        HistoryManage.back();
      }
    },
    ready:function(){
      const self = this;
      var countdown = function(){
        if(self.time<0){
          self.isShowDialog = true;
          return clearTimeout(timer);
        }
        //todo
      var timer=  setTimeout(()=>{
         self.time -= 1;
         countdown();
          clearTimeout(timer);
       },1000);
      }
     countdown()
    },
    data:function(){
      return {
        picked:1,
        order: this.$parent.order,
        isShowDialog:false,
        time:Pay.delayTime
      }
    },
    computed:{
      countdown: function () {
       // `this` 指向 vm 实例
       return ~~(this.time/60)+"分"+(this.time%60)+"秒";
     }
    }
  }
 </script>
